<template>
	<view class="container">
		<page-head :title="title"></page-head>
		
		<!-- 学科交叉信息平台筛选表单 -->
		<view class="uni-title uni-common-pl">学科交叉信息平台</view>
		<view class="uni-list">
			<!-- 研究方向 -->
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					研究方向
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindResearchChange" :value="researchIndex" :range="researchOptions">
						<view class="uni-input">{{researchOptions[researchIndex] || '请选择'}}</view>
					</picker>
				</view>
			</view>

			<!-- 性别 -->
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					性别
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindGenderChange" :value="genderIndex" :range="genderOptions">
						<view class="uni-input">{{genderOptions[genderIndex] || '请选择'}}</view>
					</picker>
				</view>
			</view>

			<!-- 年龄 -->
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					年龄
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindAgeChange" :value="ageIndex" :range="ageOptions">
						<view class="uni-input">{{ageOptions[ageIndex] || '请选择'}}</view>
					</picker>
				</view>
			</view>

			<!-- 职称 -->
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					职称
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindTitleChange" :value="titleIndex" :range="titleOptions">
						<view class="uni-input">{{titleOptions[titleIndex] || '请选择'}}</view>
					</picker>
				</view>
			</view>

			<!-- 学院输入 -->
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					学院
				</view>
				<view class="uni-list-cell-db">
					<input class="uni-input" placeholder="请输入" v-model="college" />
				</view>
			</view>

			<!-- 学科输入 -->
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					学科
				</view>
				<view class="uni-list-cell-db">
					<input class="uni-input" placeholder="请输入" v-model="subject" />
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="btn reset" @click="resetAll">重置</button>
			<button class="btn search" @click="submitSearch">查询</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '学科交叉平台',
			researchOptions: ['人工智能', '生物医学', '量子计算', '环境工程'],
			researchIndex: -1,
			genderOptions: ['不限', '男', '女'],
			genderIndex: -1,
			ageOptions: ['不限', '20-30岁', '30-40岁', '40岁以上'],
			ageIndex: -1,
			titleOptions: ['教授', '副教授', '讲师', '研究员'],
			titleIndex: -1,
			college: '',
			subject: ''
		}
	},
	methods: {
		bindResearchChange(e) {
			this.researchIndex = e.detail.value
		},
		bindGenderChange(e) {
			this.genderIndex = e.detail.value
		},
		bindAgeChange(e) {
			this.ageIndex = e.detail.value
		},
		bindTitleChange(e) {
			this.titleIndex = e.detail.value
		},
		resetAll() {
			this.researchIndex = -1
			this.genderIndex = -1
			this.ageIndex = -1
			this.titleIndex = -1
			this.college = ''
			this.subject = ''
		},
		submitSearch() {
			const params = {
				research: this.researchOptions[this.researchIndex],
				gender: this.genderOptions[this.genderIndex],
				age: this.ageOptions[this.ageIndex],
				title: this.titleOptions[this.titleIndex],
				college: this.college,
				subject: this.subject
			}
			console.log('搜索参数：', params)
		}
	}
}
</script>

<style>
.container {
	padding: 20rpx;
}

.uni-list-cell {
	border-bottom: 1rpx solid #eee;
	padding: 20rpx 0;
}

.uni-list-cell-left {
	width: 200rpx;
	font-size: 28rpx;
	color: #666;
}

.uni-input {
	text-align: right;
	color: #333;
	font-size: 28rpx;
}

.action-buttons {
	display: flex;
	margin-top: 40rpx;
	gap: 20rpx;
}

.btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 8rpx;
	font-size: 32rpx;
}

.reset {
	background: #f8f8f8;
	color: #666;
}

.search {
	background: #007AFF;
	color: white;
}
</style>